<template>
  <div class="app-layout">


    <!-- 主内容区 -->
    <div class="main-container">
      <!-- 面包屑导航 -->
      <div class="breadcrumb">
        <span class="breadcrumb-item">首页</span>
        <span class="breadcrumb-divider">/</span>
        <span class="breadcrumb-item">个人中心</span>
      </div>

      <div class="content-container">
        <div class="left-sidebar">
          <div class="sidebar-menu">
            <router-link to="/enterprise" class="more-link" tag="el-link" type="primary" style="text-decoration: none;"><div class="menu-item">
              <img src="/public/images/u721.png" class="menu-icon">
              <span>企业信息</span>
            </div>
            </router-link>
            <div class="menu-item">
              <img src="/public/images/u935.png" class="menu-icon">
              <span>参与投标</span>
            </div>
            <div class="menu-item">
              <img src="/public/images/u1162.png" class="menu-icon">
              <span>我的投标</span>
            </div>
          </div>
        </div>
        
        <!-- 右侧内容区 -->
        <div class="right-content">
          <div class="user-info-card">
            
            <div class="info-item">
              <span class="info-label">用户名称：</span>
              <span class="info-value">admin</span>
            </div>
            
            <div class="info-item">
              <span class="info-label">ip属地：</span>
              <span class="info-value">辽宁省大连市</span>
            </div>
            
            <div class="info-item">
              <span class="info-label">所属机构：</span>
              <span class="info-value">企业机构</span>
            </div>
            
            <div class="info-item">
              <span class="info-label">手机号码：</span>
              <span class="info-value">15610565780</span>
            </div>
            
            <div class="info-item">
              <span class="info-label">当前密码：</span>
              <span class="info-value">●●●●●</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserInfo'
}
</script>

<style scoped>
.app-layout {
  min-height: 100vh;
  background-color: #f5f5f5;
  font-family: "Microsoft YaHei", sans-serif;
}

/* 顶部标题栏样式 */
.top-header {
  background-color: #1ab394;
  color: white;
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.top-header {
  font-size: 20px;
  font-weight: bold;
}

.nav-menu {
  display: flex;
}

.nav-item {
  padding: 0 15px;
  cursor: pointer;
  font-size: 16px;
}

.nav-item:hover {
  opacity: 0.8;
}

/* 主内容区样式 */
.main-container {
  padding: 20px;
}

.breadcrumb {
  margin-bottom: 20px;
  color: #999;
  font-size: 14px;
}

.breadcrumb-divider {
  margin: 0 8px;
}

.content-container {
  display: flex;
}

/* 左侧导航栏样式 */
.left-sidebar {
  width: 220px;
  background-color: rgba(34, 202, 154, 0.674);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  margin-right: 20px;
}

.sidebar-menu {
  padding: 10px 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.3s;
}


.menu-item:hover {
  background-color: #f5f5f5;
}

.menu-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

/* 右侧内容区样式 */
.right-content {
  flex: 1;
}

.user-info-card {
  background-color: white;
  border-radius: 4px;
  padding: 25px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.info-title {
  margin-bottom: 25px;
  font-size: 18px;
  color: #333;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  font-size: 15px;
}

.info-label {
  width: 120px;
  color: #666;
  text-align: right;
  padding-right: 20px;
}

.info-value {
  color: #333;
  flex: 1;
}

.modify-btn {
  margin-left: 20px;
  color: #1ab394;
}
</style>